<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
#before::before, #after::after { content: attr(my-value); }
#before2::before { content: "before"; }
</style>
<div id="before">
    <div></div>
    <div>
        <div></div>
    </div>
</div>
<div id="after">
    <div></div>
    <div>
        <div></div>
    </div>
</div>
<div id="before2">
    <div></div>
    <div>
        <div></div>
    </div>
</div>
<script>
description("No subtree recalc when changing attribute used in generated content.");

document.body.offsetTop; // force layout

// Setting attribute neither used in attribute selectors nor content should not
// cause a recalc.

before.setAttribute("attr-unused", "unused");
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");

document.body.offsetTop; // force layout

before.setAttribute("my-value", "before");
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");

document.body.offsetTop; // force layout

after.setAttribute("my-value", "after");
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");

document.body.offsetTop; // force layout

before2.setAttribute("my-value", "before");
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "0");
</script>
